<template>
	<view class="container">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block v-slot:content></block>
		</cu-custom>
		<view class="contents-white">
			<view class="input-boxs padding-lr flex text-center justify-center">
				<view style="margin-top: 136rpx;width: 100%;">
					<view class="boxs-logo padding">
						<image class="logo image_175" src="../../static/logo.jpg"></image>
						<view class="text-black text-bold text-black margin-top-xs">源社区</view>
					</view>
					<view class="boxs-info" v-if="canIUse">
						<view class="padding-sm text-black text-blue text-blod">该程序将获取以下授权</view>
						<view class="text-black text-blue login-txt">获取您的手机号码</view>
						<view class="flex flex-direction padding" style="margin-top: 20rpx;">
							<!-- #ifdef MP-WEIXIN -->
							<button class="margin-top-sm cu-btn round lg text-white text-size-32 bg-menu"
								open-type="getUserInfo" lang="zh_CN" @getuserinfo="bindGetUserInfo">
								一键授权登录
							</button>
							<!-- 	<button class="margin-top-sm cu-btn round lg text-white text-size-32 bg-menu" 
								lang="zh_CN" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
								手机号码授权登录
							</button> -->
							<!-- #endif -->
						</view>
					</view>
					<view v-else>请升级微信版本</view>
				</view>
			</view>
			<view class="no-login text-center" @click="handleOtherLogin">
				<text class="text-gray text-size-28">手机号登录</text>
				<text class="margin-lr text-gray">/</text>
				<text class="text-gray text-size-28">账号密码登录</text>
				<text class="cuIcon-right text-gray margin-left"></text>
			</view>
		</view>
		<view class="login-bot">
			<view>未注册手机号登录后将自动生成账号</view>
			<view class="text-center margin-lr text-size-14 text-color-assist">
				<checkbox-group @change="checkboxChange">
					<checkbox style="transform:scale(0.7)" value="read" />
					<text class="margin-left-sm">我已阅读</text>
					<text @click="handleAgreement" class="text-blue ">《用户服务协议》</text>
					<text @click="handleAgreementprivacy" class="text-blue">《隐私协议》</text>
				</checkbox-group>
			</view>
		</view>
		<cu-modal @action="handleBindPhone" tag="AuthorizationModal" :modalName="visible"></cu-modal>
	</view>
</template>

<script setup lang="ts">
	import cuCustom from '@/components/cu-custom.vue';
	import cuModal from '@/components/cu-modal.vue';
	import {
		ref
	} from 'vue';
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		login
	} from '@/common/api/login';
	import { accountInfo } from '@/common/api/user';
	import { onShow, onLoad } from '@dcloudio/uni-app';
	const visible = ref('');
	const canIUse = uni.canIUse('button.open-type.getUserInfo');
	const setting = useSettingStore();
	const handleOtherLogin = () => {
		uni.navigateTo({
			url: '/views/login/phonelogin'
		});
	};
	const isRead = ref(false);
	const checkboxChange = (e : any) => {
		isRead.value = e.detail.value[0] == 'read';
	};
	const handleAgreement = () => {
		uni.navigateTo({
			url: '/views/other/agreement'
		});
	};
	const handleAgreementprivacy = () => {
		uni.navigateTo({
			url: '/views/other/agreementprivacy'
		});
	};
	const isLogin = ref(false)
	const onUserInfo = () => {
		isLogin.value = true
		accountInfo({}).then((res : any) => {
			if (res.code == 1000) {
				uni.setStorage({
					key: 'userinfo',
					data: JSON.stringify(res.data)
				})
				setting.userInfo = res.data;
				setting.isLogin = true;
				isLogin.value = false
				if (setting.housing.communityId == 0) {
					uni.navigateTo({
						url: '/views/other/bindshop'
					});
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			} else {
				isLogin.value = false
			}
		});
	};
	const handleBindPhone = async (e : any) => {
		visible.value = '';
		if (!e) {
			uni.hideToast();
			uni.navigateBack()
			return;
		}
		if (!e.detail) {
			uni.hideToast();
			uni.navigateBack()
			return;
		}
		if (!e.detail.code) {
			uni.hideToast();
			uni.navigateBack()
			return;
		}
		handleWxLogin(e.detail.code)
	};
	const onWxLogin = (code : string, phonecode : string) => {
		login({
			loginMethod: 'wechat',
			wechatCode: code,
			phoneCode: phonecode,
			inviteUserId: setting.inviteUserId
		}).then((res : any) => {
			uni.hideLoading();
			if (res.code == 1000) {
				setting.onLogin(res.data.token);
				setting.setOpenId(res.data.openId)
				setting.token = res.data.token;
				// if (!res.data.phone) {
				// 	visible.value = 'AuthorizationModal';
				// 	isLogin.value = false
				// 	return;
				// }
				onUserInfo();
			} else {
				uni.showToast({
					title: '登录失败',
					duration: 2000
				});
			}
		});
	};
	/**
	 * 微信授权code
	 */
	const handleWxLogin = (code : any) => {
		uni.login({
			provider: 'weixin',
			success: res => {
				onWxLogin(res.code, code);
			}
		});
	};
	/**
	 * 获取微信手机号code
	 */
	const decryptPhoneNumber = (e : any) => {
		if (!isRead.value) {
			uni.showToast({
				title: '请勾选阅读协议',
				duration: 2000,
				icon: 'error'
			});
			return
		}
		handleWxLogin(e.detail.code)
	};
	//授权
	function bindGetUserInfo(e : any) {
		if (!isRead.value) {
			uni.showToast({
				title: '请勾选阅读协议',
				duration: 2000,
				icon: 'error'
			});
			return
		}
		if (e.detail.userInfo) {
			//用户按了允许授权按钮
			// 获取到用户的信息了，打印到控制台上看下
			uni.showLoading({
				title: '授权中...'
			});
			setting.userInfo = e.detail.userInfo;
			handleWxLogin('');
		} else {
			//用户按了拒绝按钮
			uni.showModal({
				title: '警告',
				content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
				showCancel: false,
				confirmText: '返回授权',
				success: res => {
					// 用户没有授权成功，不需要改变 isHide 的值
					if (res.confirm) {
						console.log('用户点击了“返回授权”');
					}
				}
			});

		}
	}
	let lastPath = ''
	onLoad((prop : any) => {
		if (prop.back) {
			lastPath = prop.back
		}
	})
</script>

<style scoped lang="scss">
	.container {
		background-color: #FFFFFF;
	}

	.contents-white {
		height: calc(100% - 60px);
	}

	.login-txt {
		color: #999999;
		font-size: 28rpx;
	}

	.login-bg {
		background: #4287FC !important;
		height: 80rpx;
		width: 600rpx;
	}

	.login-bot {
		position: fixed;
		bottom: 100rpx;
		left: 0;
		width: 100%;
	}

	.login-bot view {
		text-align: center;
		color: #999999;
		font-size: 22rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.login-bot text {
		color: #4287FC;
	}

	.login-bot checkbox {
		width: 50rpx;
		height: 50rpx;
	}
</style>